<!-- formGroup 绑定表单form: [formGroup]="user" -->
<!-- <form>元素上的novalidate属性会阻止浏览器使用原生HTML中的表单验证器。 -->
<form novalidate class="form" [formGroup]="user" (ngSubmit)="onSubmit(user)">
  <div class="form-group">
    <label>用户名</label>
    <!-- formControlName="" 普通绑定 -->
    <input type="text" class="form-control" placeholder="请输入用户名" formControlName="name">
  </div>
  <!-- 错误信息的显示 -->
  <div class="error" *ngIf="user.get('name').hasError('required') && user.get('name').touched">用户名是必须的!</div>
  <div class="error" *ngIf="user.get('name').hasError('minlength') && user.get('name').touched">用户名不得低于6位!</div>
  <!-- [formGroup]="user"：内部的formGroup绑定变为： formGroupName="" -->
  <div class="" formGroupName="account">
    <div class="form-group">
      <label>邮箱</label>
      <input type="text" class="form-control" placeholder="Your email address" formControlName="email">
    </div>
    <div class="error" *ngIf="user.get('account').get('email').hasError('required') && user.get('account').get('email').touched">邮箱是必须的！</div>
    <div class="form-group">
      <label>确认邮箱</label>
      <input type="text" class="form-control" placeholder="Confirm your email address" formControlName="confirm">
    </div>
    <!-- tips: user.get('account.confirm')  === user.get('account').get('confirm') -->
    <div class="error" *ngIf="user.get('account.confirm').hasError('required') && user.get('account.confirm').touched">请确认邮箱</div>
  </div>
  <div class="error" *ngIf="user.get('account').touched && user.get('account').hasError('nomatch')">邮箱必须一致!</div>
  <button class="btn btn-primary" stype="submit" [disabled]="user.invalid">Sign up</button>
</form>

<div class="form-value">
  form的值
  <!-- tips: 这里user 绑定的是formGroup实例，需要user.value 获取它的值在以json形式展现 -->
  <span>{{user.value | json}}</span>
</div>

<div class="form-value">
  测试user.get()
  <span>email： {{user.value.account.email}}</span>
</div>
